<template>
  <div class="about" style="background-color: rgba(255, 255, 255, 0.6);">
    <img class="background" src="../../assets/350.jpg" alt="" />
    <img v-if="userInfo === ''" class="avatar" src="../../assets/tx.gif" alt="" />
    <img v-if="userInfo !== ''" class="avatar" :src="userInfo.avatar" alt="" />
    <p v-if="userInfo === ''" class="name">
      <router-link
      to="/login"
      class="nav-link contribute myLogin"
      style="margin-right: 0; color: darkgray"
      >登录</router-link>
    </p>
    <p v-if="userInfo !== ''" class="name">{{userInfo.nickname}}</p>
    <div v-if="userInfo !== ''">
      <div class="line"></div>
      <h4>技能值</h4>
      <div class="progresses">
        <Row v-for="power in powerList" :gutter="20" :key="power.id">
          <Col :span="6">
            <p class="title">{{ power.lange }}</p>
          </Col>
          <Col :span="18">
            <Progress
              status="active"
              :hide-info="true"
              :stroke-width="10"
              :percent="power.acPercent"
              class="bar"
            ></Progress>
          </Col>
        </Row>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import VueCookie from "js-cookie";
import {getPowerList} from "../../api/oj/commit";

export default {
  data() {
    return {
      userInfo: '',
      powerList: [],
    }
  },
  mounted: function () {
    if (VueCookie.get("userInfo") !== undefined) {
      this.userInfo = JSON.parse(VueCookie.get("userInfo"));
      getPowerList(this.userInfo.id).then(res => {
        this.powerList = res.result;
      });
    }
  }
};
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
@import '../../assets/stylus/theme.styl';

.about {
  position: relative;
  text-align: center;
  border: 1px solid $color-border;
  padding-bottom: 20px;
  background-color: #fff;

  img.background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 125px;
    z-index: 1;
  }

  img.avatar {
    position: relative;
    margin: 75px auto 15px;
    width: 100px;
    height: 100px;
    border: 5px solid $color-gradually-gray-91;
    border-radius: 50%;
    z-index: 9;
  }

  .name {
    font-size: 22px;
    color: $color-typegraphy-title;
    line-height: 30px;
    font-weight: 700;
  }

  .desc {
    font-size: 15px;
    color: $color-secondary-info;
    line-height: 30px;
    font-weight: 100;
  }

  .social {
    text-align: center;
    padding: 0 20px;
    margin-top: 15px;
    list-style: none;

    > li {
      padding: 8px;

      a, .el-popover__reference {
        display: inline-block;
        width: 44px;
        height: 44px;
        margin: auto;

        img {
          width: 90%;
        }
      }
    }
  }

  .line {
    height: 1px;
    background-color: $color-gradually-gray-91;
    margin: 10px 20px;
  }

  h4 {
    font-size: 19px;
    margin: 30px 0 20px;
    font-weight: 600;
  }

  .progresses {
    padding: 0 20px;

    p.title {
      height: 38px;
      line-height: 38px;
      text-align: right;
    }

    .bar {
      margin: 10px 0;
    }
  }
}
</style>
